<script lang="ts" setup>
// const monaco = useMonaco()!
// const editorEl = ref<HTMLDivElement>()
// monaco.editor.create(editorEl.value!, { language: 'typescript' })
const ws_href = "wss://localhost:5467/_ws?user=1";
const ws = useWebSocket(ws_href, {
  heartbeat: {
    interval: 5000,
    message: "ping",
    pongTimeout: 5000,
  },
});
watch(ws.data, (data) => {
  if (data === 'fin') 
    ws.close();
})
const disableSend = ref(false);
console.log("connect wss://localhost:5467/_ws win.");
onUnmounted(() => {
  if (ws.status.value !== "CLOSED") 
    ws.close();
});
</script>

<template>
  <div>
    <div>
      <ClientOnly>
        <p>ws status: {{ ws.status }}</p>
        <p>ws data: {{ ws.data }}</p>
        <template #fallback>
          <p>Loading comments...</p>
        </template>
      </ClientOnly>
      <div class="*:m-2">
        <UButton @click="() => ws.open()">
          open
        </UButton>
        <UButton @click="() => ws.close()">
          close
        </UButton>
        <UButton
          :disabled="disableSend"
          @click="
            () => {
              if (ws.status.value === 'OPEN') {
                ws.send('ping');
              }
              else {
                disableSend = true;
                $toast.add({
                  id: '4782',
                  icon: 'i-heroicons-exclamation-circle',
                  color: 'yellow',
                  title: 'websocket 未连接',
                  callback: () => {
                    disableSend = false;
                  },
                  timeout: 1500,
                });
              }
            }
          "
        >
          send
        </UButton>
      </div>
    </div>
    <div class="w-full h-[300px] m-2">
      <ClientOnly>
        <VueFlowVflow />
        <template #fallback>
          <FallBack />
        </template>
      </ClientOnly>
    </div>
    <div class="w-full h-[300px] m-2 border-2 border-solid border-red-400">
      <ClientOnly>
        <PlayMonaco />
        <template #fallback>
          <FallBack />
        </template>
      </ClientOnly>
    </div>
    <div class="w-full h-[300px] m-2">
      <ClientOnly>
        <UCard>
          <CommentComp :cid="0" :flow-obj="null" />
        </UCard>
        <template #fallback>
          <FallBack />
        </template>
      </ClientOnly>
    </div>
  </div>
</template>

<style scoped lang="postcss"></style>
